<template>
  <div>
    <p>List</p>
    <ul>
      <li v-for="user of userData" :key="user">{{ user }}</li>
    </ul>
    <button @click="addData">添加数据</button>
    <button @click="fafaData">发送数据---自定义事件2</button>
    <button @click="destoryHandle">卸载List</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
/*
  逻辑顺序 当子组件向父组件传递数据 自定义事件应写给接收方 发送方是调用这个自定义事件进行传参
*/

export default {
  name: "List",
  data() {
    return {
      userData: ["小谢", "小文", "小彪"],
    };
  },

  methods: {
    //自定义事件1
    fasongData() {
      //触发当前实例上的事件。附加参数都会传给监听器回调。
      /* 第一个参数是自定义事件名 第二个参数是要传递的值 */
      this.$emit("getdataHandle", this.userData);
    },
    addData() {
      this.userData.unshift(uuidv4());
    },
    //自定义事件2
    fafaData() {
      //触发自定义事件 并传递数据
      this.$emit("getdata", this.userData);
    },
    //卸载组件
    destoryHandle() {
      this.$destroy();
    },
  },
  beforeDestroy() {
    //要解绑的自定义事件名
    this.$off("getdata");
  },
};
</script>

<style></style>
